import { Component, OnInit,Input,Output ,EventEmitter,ElementRef,ViewChild,enableProdMode ,SimpleChanges} from '@angular/core';
// enableProdMode()
@Component({
  selector: 'el-radio-group',
  template: `
    <div #self *ngIf='!isButton'  class="el-radio-group" (click)=handleChange($event)>
        
        <el-radio  *ngFor="let radio of radioList" [name]="radio.name" [label]="radio.label" [disabled]="radio.disabled" [model]='model'></el-radio>
        
    </div>

    <div #self_btn *ngIf='isButton'  class="el-radio-group" (click)=handleChange($event)>
    
        <el-radio-button  *ngFor="let radio of radioList" [name]="radio.name" [label]="radio.label" [disabled]="radio.disabled||disabled" [model]='model' [size]="size" [fill]="fill" [textColor]="textColor" [value]="value"></el-radio-button>
    
    </div>
    
    
  `,
  styleUrls: ['./radio-group.css']
})
export class ElRadioGroupComponent implements OnInit {


    @Input() size:string;
    @Input() fill:string;
    @Input() textColor:string;
    @Input() isButton:boolean=false
    @Input() radioList:radioInput[];
    @Input() disabled:boolean=false

    @Input() model:string|number
    @Output() modelChange:EventEmitter<any>=new EventEmitter<any>()

    value:any=null;
    modelValue:any=null;
    @Output() valueChange:EventEmitter<any>=new EventEmitter<any>()

    @ViewChild('self') self:ElementRef

    constructor() { }

    ngOnChanges(changes:SimpleChanges){
        if(changes['model']){
            if(changes['model'].currentValue!==this.value){
                this.value=changes['model'].currentValue
            }
        }
    }

    ngOnInit() {
        
    }


    handleChange(e){
            if(e.target.tagName==='INPUT'){
                // console.log(e.target.value)
                if(e.target.value!==this.value){
                    this.value=e.target.value;
                    this.modelChange.emit(this.value);
                    this.valueChange.emit(this.value)
                }
            }
    }





  

}


interface radioInput{
    label:string|number|boolean,
    disabled?:boolean,
    name:string
}